<template>
  <v-app>
    <v-app-bar color="accent" elevation="0" app dark>
      <v-toolbar-title>
        <v-avatar tile>
          <v-icon size="40" style="transform: rotate(180deg)"
            >mdi-android-auto</v-icon
          >
        </v-avatar>
        Vuetify-Admin
      </v-toolbar-title>
    </v-app-bar>
    <v-content>
      <v-container fill-height fluid>
        <v-layout align-center justify-center>
          <v-form>
            <v-card
              max-width="100%"
              width="320"
              align-self-center
              flat
              light
            >
              <v-text-field
                label="账号"
                v-model="account"
                :error-messages="accountErrors"
                filled
              ></v-text-field>
              <v-text-field
                :type="showPW ? 'text' : 'password'"
                label="密码"
                v-model="password"
                :append-icon="showPW ? 'mdi-eye' : 'mdi-eye-off'"
                :error-messages="passwordErrors"
                filled
                @click:append="showPW = !showPW"
              ></v-text-field>
              <v-card-actions class="px-0">
                <v-row>
                  <v-col>
                    <v-btn
                      color="secondary"
                      depressed
                      large
                      @click="register"
                      :loading="rLoading"
                      block
                      >注册</v-btn
                    >
                  </v-col>
                  <v-col>
                    <v-btn
                      color="secondary"
                      depressed
                      large
                      :loading="lLoading"
                      @click="submit"
                      block
                      >登录</v-btn
                    >
                  </v-col>
                </v-row>
              </v-card-actions>
            </v-card>
          </v-form>
        </v-layout>
      </v-container>
    </v-content>
    <v-snackbar
      :color="snackbar.color"
      v-model="snackbar.show"
      class="mt-12"
      absolute
      top
    >
      {{ snackbar.text }}
      <v-btn text @click="snackbar.show = false">关闭</v-btn>
    </v-snackbar>
  </v-app>
</template>

<script>
import { validationMixin } from 'vuelidate'
import { required, maxLength } from 'vuelidate/lib/validators'

export default {
  name: 'Login',
  data () {
    return {
      account: '', // 账号
      password: '', // 密码
      showPW: false, // 是否显示密码
      lLoading: false, // 登录中
      rLoading: false, // 登录中
      snackbar: {
        show: false,
        color: 'grey darken-4',
        text: ''
      }
    }
  },
  mixins: [validationMixin],
  validations: {
    account: { required, maxLength: maxLength(30) },
    password: { required }
  },
  computed: {
    accountErrors () {
      const err = []
      if (!this.$v.account.$dirty) return err
      !this.$v.account.required && err.push('账号还没填呢')
      !this.$v.account.maxLength && err.push('账号太长了')
      return err
    },
    passwordErrors () {
      const err = []
      if (!this.$v.password.$dirty) return err
      !this.$v.password.required && err.push('密码还没填呢')
      return err
    }
  },
  methods: {
    submit () {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        this.lLoading = true
        setTimeout(() => {
          this.lLoading = false
          this.$router.push('/user')
        }, 1500)
      }
    },
    register () {
      this.rLoading = true
      setTimeout(() => {
        this.rLoading = false
        this.$router.push('/register')
      }, 1500)
    }
  }
}
</script>
